<template>
  <div class="dialog" v-for="(item, index) in commentdata" :key="index">
    <dialogcpn :item="item" @replyname="replyname">
      <template #childrencomment="{ children }">
        <template v-for="(zitem, zindex) in children" :key="zindex">
          <dialogcpn :item="zitem" @replyname="replyname" />
        </template>
      </template>
      <template #foot="{ childrenlength, dispose, ispack }">
        <template v-if="childrenlength.length > 2">
          <div class="arrreply" @click="dispose(item, ispack)">
            {{ ispack ? `查看全部 ${childrenlength.length} 条回复` : "收起" }}
          </div>
        </template>
      </template>
    </dialogcpn>
  </div>
  <Replytobox
    :zdata="commentdata"
    :placeholder="placeholder"
    :commentinfo="commentinfo"
  >
  </Replytobox>
</template>

<script >
import { defineComponent, computed, ref, reactive } from "vue";
import { useStore } from "vuex";

import dialogcpn from "./dialogcpn.vue";
import Replytobox from "./Replytobox.vue";
import LocalCache from "@/utils/cache.js";

export default defineComponent({
  components: { dialogcpn, Replytobox },
  props: {},
  setup() {
    const store = useStore();
    const commentdata = computed(() => store.getters["comment/getcommentdata"]);
    console.log({ ...commentdata }, "zzycommentdata");
    const placeholder = ref("善言善语");
    //来判断 是否回复 评论还是 文章
    const commentinfo = reactive({
      commentid: 0,
      userid: LocalCache.getCache("id"),
    });
    const replyname = (obj) => {
      const { name, articleid, commentid, commentuid } = obj;
      console.log(name, articleid, commentid, commentuid, "hname");
      if (commentid) {
        commentinfo.commentid = commentid;
      } else {
        commentinfo.commentid = commentuid;
      }
      placeholder.value = `回复：${name}`;
    };
    //发布

    return { commentdata, placeholder, replyname, commentinfo };
  },
});
</script>

<style scoped lang="less">
.dialog {
  display: flex;
  margin-bottom: 10px;
  /deep/.el-dialog {
    height: 300px;
  }

  .praise {
    > span {
      margin-right: 10px;
    }
  }
}
.arrreply {
  display: inline-block;
  margin-top: 10px;
  padding-left: 12px;
  padding-right: 12px;
  background-color: #edeef2;
  color: #8691a7;
  border-radius: 5px;
}
</style>
